<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="icon" href="<%= assetPrefix %>/favicon.ico" />
    <!--  <meta name="viewport" content="width=device-width,initial-scale=1.0" />-->
    <!-- 注入meta -->
    <%= meta %>
    <style>
      :root {
        --element-primary-color: #2d49d1;
      }
      html,
      body {
        width: 100%;
        max-height: 100vh;
      }
      #app-loading__index {
        width: 50px;
        height: 50px;
        position: fixed;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        margin: auto;
        z-index: 99999;
        pointer-events: none;
      }
      .ant-spin-dot {
        position: relative;
        display: inline-block;
        font-size: 32px;
        width: 32px;
        height: 32px;
        background: transparent;
      }
      .ant-spin-dot-spin {
        transform: rotate(45deg);
        animation: ant-rotate 1.2s infinite linear;
      }
      .ant-spin-dot i {
        width: 14px;
        height: 14px;
        border-radius: 100%;
        background-color: var(--element-primary-color);
        transform: scale(0.75);
        display: block;
        position: absolute;
        opacity: 0.3;
        animation: ant-spin-move 1s infinite linear alternate;
        transform-origin: 50% 50%;
      }
      .ant-spin-dot i:nth-child(1) {
        left: 0;
        top: 0;
      }
      .ant-spin-dot i:nth-child(2) {
        right: 0;
        top: 0;
        animation-delay: 0.4s;
      }
      .ant-spin-dot i:nth-child(3) {
        right: 0;
        bottom: 0;
        animation-delay: 0.8s;
      }
      .ant-spin-dot i:nth-child(4) {
        left: 0;
        bottom: 0;
        animation-delay: 1.2s;
      }
      @keyframes ant-spin-move {
        to {
          opacity: 1;
        }
      }
      @keyframes ant-rotate {
        to {
          transform: rotate(405deg);
        }
      }
    </style>
    <!-- 注入link -->
    <%= link %>
    <title>消金业务综合服务平台</title>
  </head>

  <body class="g-cKuginPlry theme--tzx">
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please
        enable it to continue.</strong
      >
    </noscript>

    <div id="app">
      <!--页面初始化 loading-->
      <section id="app-loading__index">
        <div class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></div>
      </section>
    </div>

    <script>
      document.addEventListener('DOMContentLoaded', () => {
        console.log(
          `%c 前端构建时间 🎉 %c ` + `<%= buildTime %>` + ` %c`,
          `background: #ffb366; padding: 2px; color: #fff; font-weight: bold; text-transform: uppercase;`,
          `background: #00ffc0; padding: 2px; color: #444; font-weight: bold; text-transform: uppercase;`,
          'background: transparent'
        )
      })
    </script>

    <!--  生产和开发环境都依赖的js  -->
    <script src="<%= assetPrefix %>/config/config.js"></script>

    <!-- 注入js -->
    <%= script %>
  </body>
</html>
